<template>
<<<<<<< HEAD
  <div>我是登入页</div>
</template>
=======
  <div class="denglu">
    <div class="quxiao" @click="quxiao">取消</div>
    <div class="wenzi">登录</div>
    <!--  中间内容部分-->
    <div class="neirong">
      <van-form @submit="onSubmit" @failed="onFailed">
        <div class="zhanghao">
          <van-field
            v-model="username"
            name="手机号"
            label="+86："
            placeholder="请输入您的手机号/邮箱"
            :rules="[
              {
                required: true,
                message: '您的手机号不符合格式',
                pattern,
              },
            ]"
          />
        </div>

        <div class="mima">
          <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码："
            placeholder="请输入您的密码"
            :rules="[
              {
                required: true,
                message: '您的密码必须是由6到16位数字字母_-组成',
                validator,
              },
            ]"
          />
        </div>
        <div style="margin: 16px">
          <van-button
            square
            block
            color="#68DCDC"
            native-type="submit"
            @click="jinru"
            >进入你今天真好看</van-button
          >
        </div>
      </van-form>
    </div>

    <!-- 快速祖册，忘记密码部分 -->
    <div class="zcmm">
      <div class="zc" @click="GOToRegi">快速注册</div>
      <div class="mm" @click="GoToyanzheng">
        <!-- <a href="../views/Registry.vue">忘记密码</a> -->
        忘记密码
      </div>
    </div>

    <!-- 第三方登录库 -->
    <div class="sanfang">
      <div class="left"></div>
      <div>第三方登录库</div>
      <div class="right"></div>
    </div>

    <!-- 微信图片 -->
    <div class="weixin">
      <img src="https://ftp.bmp.ovh/imgs/2021/07/38cfcc288d40afeb.png" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
      pattern:
        /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/,
    };
  },
  methods: {
    // 点击取消，所有的值清空
    quxiao() {
      console.log(1);
      (this.username = ""), (this.password = "");
    },
    // 校验函数返回 true 表示校验通过，false 表示不通过
    validator(val) {
      return /^[a-zA-Z0-9_-]{6,16}$/.test(val);
    },
    // 将用户名和密码的值输入到控制台上
    onSubmit(values) {
      console.log();
      console.log("submit", values);
    },
    jinru() {
      if (this.username && this.password) {
        this.$router.push("./registry");
        return;
      } else {
        alert("您的手机号和密码不能为空");
      }
    },
    GOToRegi(){
      this.$router.push('./registry')
    }
  },
};
</script>

<style lang="less" scpoed>
@import "../assets/css/var.less";
.denglu {
  .quxiao {
    color: #68dcdc;
    font-size: 15px;
    margin-top: 10px;
    margin-left: 5px;
  }
  .wenzi {
    color: #605e62;
    text-align: center;
    font-size: 25px;
    margin-top: 20px;
    margin-bottom: 45px;
  }
  .neirong {
    .zhanghao,
    .mima {
      width: 90%;
      margin: auto;
      margin-bottom: 20px;
      border: 1px solid #605e62;
    }
  }
  .zcmm {
    display: flex;
    margin: auto;
    width: 80%;
    font-size: 12px;
    font-weight: 600;
    color: #504e52;
    justify-content: space-between;
  }
  .sanfang {
    display: flex;
    margin: auto;
    margin-top: 120px;
    margin-bottom: 20px;
    justify-content: space-around;
    align-items: center;
    color: #504e52;
    font-size: 12px;
    color: #504e52;
    .left,
    .right {
      width: 117px;
      height: 1px;
      background: #cacaca;
    }
  }
  .weixin {
    border: 1px dashed black;
    width: 86px;
    height: 86px;
    margin: auto;
    img {
      width: 84px;
      height: 84px;
    }
  }
}
</style>
>>>>>>> 517d897f7297e3234eaea68f98ff6168e5feb1e7
